<template>
  <div id="bb">
    <el-form id="aaaaa" :rules="rules" ref="helpInfo" :model="helpInfo">
      <el-form-item label="需求类型" :lable-width="formLabelWidth" prop="type">
        <el-input
          type="input"
          placeholder="请输入需求类型  如:课程帮助、约会聚餐"
          v-model="helpInfo.type"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="需求详细描述"
        :lable-width="formLabelWidth"
        prop="detail"
      >
        <el-input
          type="input"
          placeholder="请输入需求描述"
          v-model="helpInfo.detail"
        ></el-input>
      </el-form-item>
      <el-form-item label="地点" :lable-width="formLabelWidth" prop="location">
        <el-input
          type="input"
          placeholder="请输入地点"
          v-model="helpInfo.location"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话" :lable-width="formLabelWidth" prop="phone">
        <el-input
          type="input"
          placeholder="请输入电话"
          v-model="helpInfo.phone"
        ></el-input>
      </el-form-item>
      <el-form-item>
          <el-button  type="danger" round @click="addhelp">确认上传</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addHelp } from "../services/help";
export default {
  data() {
    return {
      helpInfo: {
        type: "",
        detail: "",
        location: "",
        phone: "",
      },
      formLabelWidth: "100px",
      rules: {
        type: [{ required: true, message: "类型不能为空", tigger: "blur" }],
        detail: [{ required: true, message: "不能为空", tigger: "blur" }],
        location: [{ required: true, message: "地点不能为空", tigger: "blur" }],
        phone: [{ required: true, message: "电话不能为空", tigger: "blur" }],
      },
    };
  },
  methods: {
    addhelp: function () {
      this.helpInfo.helpee_id=this.$store.state.account.user.id;
      this.helpInfo.helper_id=0;
      this.helpInfo.status=0;
      this.$confirm("确认发布帮助吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          addHelp(this.helpInfo).then((res) => {
            this.$message({
              type: "success",
              message: "发布成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    }
  },
};
</script>


<style scoped>
#aaaaa {
  border-radius: 60px;
  background-clip: padding-box;
  margin: 160px auto;
  width: 600px;
  padding: 35px 35px 15px 35px;
  background-color: rgb(247, 247, 247);
  border: 2px solid #f38d74;
  box-shadow: 0 0 25px #ec6666;
  text-align: center;
  height: auto;
}
#bb {
  background: url("../assets/login_bg.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
</style>